<template>
    <p>注册页</p>
    <el-form ref="ruleFormRef" :model="form" :rules="rules" status-icon label-width="80px">
        <el-form-item label="账号" prop="account">
            <el-input v-model="form.account" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="cfpassword">
            <el-input v-model="form.cfpassword" type="password" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                提交
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>

import { ref } from 'vue'


const ruleFormRef = ref()

const form = ref({
    account: '',
    password:'',
    cfpassword:''

})

const rules = ref({
    account: [
        { required: true, message: '请输入用户名', trigger: ['change','blur'] },
       {pattern:/^[a-zA-Z]{6,10}$/,message:'用户名由英文字母组成，长度为6~10',trigger: ['change','blur'] }
    ],
    password:[
    { required: true, min:6, message: '请输入至少6个字符的密码', trigger: ['change','blur'] },
    ],
    cfpassword:[
        {
            required: true,
            validator: (rule, value, callback)=>{
                // console.log('rule', rule);
                // console.log('value', value);
                // console.log('callback', callback);

                if (!value) {
                    callback(new Error("请输入确认密码"))
                }

                if (value !== form.value.password) {
                    callback(new Error("两次密码输入不一致"))
                } else {
                    callback()
                }
            },
            trigger: ['change','blur']
        }
    ]
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    //   调用后台接口
    }
  })
}

</script>